<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>高校健康云</title>
    <script src="/echarts/echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="/xadmin/js/jquery.min.js"></script>
</head>

<body class="index">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    $.get('/report/getTemp').done(function (res) {
        myChart.setOption({

                title: {
                    text: '南丁格尔玫瑰图',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    left: 'center',
                    top: 'bottom',
                    data: ['NORMAL', 'lOW', 'MIDDLE', 'HIGH']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {show: true},
                        dataView: {show: true, readOnly: false},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                series: [
                    {
                        name: '半径模式',
                        type: 'pie',
                        radius: [20, 140],
                        center: ['25%', '50%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 5
                        },
                        label: {
                            show: false
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        },
                        data: [
                            {value: res.data[0], name: 'NORMAL'},
                            {value: res.data[1], name: 'lOW'},
                            {value: res.data[2], name: 'MIDDLE'},
                            {value: res.data[3], name: 'HIGH'},
                            /*{value: 20, name: 'rose 5'},
                            {value: 15, name: 'rose 6'},
                            {value: 12, name: 'rose 7'},
                            {value: 10, name: 'rose 8'}*/
                        ]
                    }

                ]

        });
    });


</script>

</body>
</html>